{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}

<div class="container">

  <div class="row mb-4">
    <div class="col-md-4">
      <div class="card p-3 shadow-sm">
        <h6>Total Students</h6>
        <h2>{{ total_students }}</h2>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3 shadow-sm">
        <h6>Present Today ({{ today }})</h6>
        <h2>{{ present_count }}</h2>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card p-3 shadow-sm">
        <h6>Absent Today ({{ today }})</h6>
        <h2>{{ absent_count }}</h2>
      </div>
    </div>
  </div>

  <!-- Comparison Chart -->
  <div class="card p-4 shadow-sm mb-5">
    <h5 class="mb-4">Present vs Absent Comparison ({{ today }})</h5>
    <canvas id="compareChart" height="200"></canvas>
  </div>
</div>

<!-- ✅ Correct CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('compareChart').getContext('2d');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Present', 'Absent'],
      datasets: [{
        label: 'Students Count',
        data: [{{ present_count }}, {{ absent_count }}],
        backgroundColor: ['#198754', '#dc3545'], // green/red
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      plugins: { legend: { display: false } },
      scales: {
        y: { beginAtZero: true, ticks: { stepSize: 1 } }
      }
    }
  });
</script>

{% endblock %}